﻿<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>impression</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico" />

    <!-- CSS
    ============================================ -->

    <!-- Vendor CSS (Contain Bootstrap, Icon Fonts) -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/vendor/icofont.min.css" />

    <!-- Plugin CSS (Global Plugins Files) -->
    <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
    <link rel="stylesheet" href="assets/css/plugins/venobox.min.css" />

    <!-- Minify Version -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css"> -->

    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- <link rel="stylesheet" href="assets/css/style.min.css"> -->

</head>

<body>

    <main class="main-wrapper">
        <!-- .....:::::: Start Header Section :::::.... -->
        <header class="header-section sticky-header d-none d-lg-block">
            <div class="header-wrapper">
                <div class="container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col">
                            <!-- Start Header Logo -->
                            <a href="index.html" class="header-logo">
                                <img src="assets/images/logo/logo.png" alt="">
                            </a>
                            <!-- End Header Logo -->
                        </div>
                        <div class="col-auto">
                            <!-- Start Header Menu -->
                            <ul class="header-nav">
                                <li><a th:href="@{/index}">首页</a></li>
                                <li class="has-dropdown">
                                    <a th:href="@{/skill}">我的技能</a>
                                </li>
                                <li class="has-dropdown">
                                    <a th:href="@{/blog}">博客</a>
                                </li>
                                <li><a th:href="@{/project}">项目</a></li>
                                <li class="has-dropdown">
                                    <a href="#">其它</a>
                                    <ul class="submenu">
                                        <li><a th:href="@{/about}">关于我</a></li>
                                        <li><a th:href="@{/contact}">联系我</a></li>
                                    </ul>
                                </li>
                            </ul>

                            <!-- End Header Menu -->
                        </div>

                        <div class="col">
                            <div class="header-btn-link text-end">
                                <a th:href="@{contact}" class="btn btn-sm btn-outline-one icon-space-left">Hire Me <i class="icofont-double-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- .....:::::: End Header Section :::::.... -->

        <!-- .....:::::: Start Mobile Header Section :::::.... -->
        <div class="mobile-header d-block d-lg-none">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col">
                        <div class="mobile-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mobile-action-link text-end">
                            <a href="#mobile-menu-offcanvas" class="offcanvas-toggle offside-menu"><i class="icofont-navigation-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- .....:::::: Start MobileHeader Section :::::.... -->

        <!--  Start Offcanvas Mobile Menu Section -->
        <div id="mobile-menu-offcanvas" class="offcanvas offcanvas-rightside offcanvas-mobile-menu-section">
            <!-- Start Offcanvas Header -->
            <div class="offcanvas-header text-right">
                <button class="offcanvas-close"><i class="icofont-close-line"></i></button>
            </div> <!-- End Offcanvas Header -->
            <!-- Start Offcanvas Mobile Menu Wrapper -->
            <div class="offcanvas-mobile-menu-wrapper">
                <!-- Start Mobile Menu  -->
                <div class="mobile-menu-bottom">
                    <!-- Start Mobile Menu Nav -->
                    <div class="offcanvas-menu">
                        <ul>

                            <li><a th:href="@{/index}">首页</a></li>

                            <li>
                                <a th:href="@{skill}"><span>技能</span></a>

                            </li>
                            <li>
                                <a th:href="@{blog}" href="#"><span>博客</span></a>
                            </li>
                            <li><a th:href="@{/project}">项目</a></li>
                            <li>
                                <a th:href="@{about}"><span>关于我</span></a>
                            </li>
                        </ul>
                    </div> <!-- End Mobile Menu Nav -->

                </div> <!-- End Mobile Menu -->

                <!-- Start Mobile contact Info -->
                <div class="mobile-contact-info text-center">
                    <ul class="social-link">
                        <li><a target="_blank" href="https://example.com"><i class="icofont-facebook"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-twitter"></i></a>
                        </li>
                        <li><a target="_blank" href="https://example.com"><i class="icofont-skype"></i></a></li>
                    </ul>
                </div>
                <!-- End Mobile contact Info -->

            </div> <!-- End Offcanvas Mobile Menu Wrapper -->
        </div>
        <!-- ...:::: End Offcanvas Mobile Menu Section:::... -->

        <!-- Offcanvas Overlay -->
        <div class="offcanvas-overlay"></div>

        <!-- ...::: Start Breadcrumb Section :::... -->
        <div class="breadcrumb-section section-bg overflow-hidden pos-relative">
            <div class="breadcrumb-shape-top-left"></div>
            <div class="breadcrumb-shape-bottom-right"></div>
            <div class="breadcrumb-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumb-content">
                                <h2 class="title">联系我</h2>
                                <ul class="breadcrumb-link">
                                    <li><a href="index.html">目录</a></li>
                                    <li class="active" aria-current="page">联系我</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Breadcrumb Section :::... -->

        <!-- ...::: Start Contact Section :::... -->
        <div class="contact-section section-gap-tb-165">
            <div class="contact-box pos-relative">
                <div class="container">
                    <div class="row">
                        <div class="col-12">

                            <!-- Start Map Area-->
<!--                            <div class="map">-->
<!--                                <div class="gmap-box">-->
<!--                                    <iframe id="gmap_canvas" src="http://www.google.cn/maps?q=121%20King%20St%2C%20Melbourne%20VIC%203000%2C%20Australia&t=&z=13&ie=UTF8&iwloc=&output=embed"></iframe>-->
<!--                                </div>-->
<!--                            </div>-->
                            <!-- End Map Area -->

                        </div>
                    </div>
                    <div class="row flex-lg-row flex-column-reverse">
                        <div class="col-lg-4">
                            <div class="contact-sidebar-wapper">
                                <div class="contact-sidebar">
                                    <!-- Start Project Sidebar Item -->
                                    <ul class="contact-sidebar-list-item">
                                        <!-- Start contact Single Box -->
                                        <li class="contact-sidebar-single-box">
                                            <h6 class="title-text">手机:</h6>
                                            <a href="tel:+0123456789" class="link">15838128915</a>
                                        </li>
                                        <!-- End contact Single Box -->
                                        <!-- Start contact Single Box -->
                                        <li class="contact-sidebar-single-box">
                                            <h6 class="title-text">邮箱:</h6>
                                            <a href="mailto:demo@example.com" class="link">bearpess@gmail.com</a>
                                        </li>
                                        <!-- End contact Single Box -->
                                        <!-- Start contact Single Box -->
                                        <li class="contact-sidebar-single-box">
                                            <h6 class="title-text">网站:</h6>
                                            <a href="https://www.example.com" class="link">https://www.yuque.com/itbear</a>
                                        </li>
                                        <!-- End contact Single Box -->
                                        <!-- Start contact Single Box -->
                                        <li class="contact-sidebar-single-box">
                                            <h6 class="title-text">住址:</h6>
                                            <span class="text">河南省郑州市</span>
                                        </li>
                                        <!-- End contact Single Box -->
                                    </ul>
                                    <!-- End Project Sidebar Item -->
                                </div>
                                <!-- Start Sidebar Widget Single Item - Social Widgets -->
                                <div class="sidebar-widget-single-area ">
                                    <h3 class="title">关注我</h3>
                                    <ul class="social-link">
                                        <li><a href="https://www.example.com" target="_blank"><i class="icofont-facebook"></i></a></li>
                                        <li><a href="https://www.example.com" target="_blank"><i class="icofont-dribbble"></i></a></li>
                                        <li><a href="https://www.example.com" target="_blank"><i class="icofont-linkedin"></i></a></li>
                                    </ul>
                                </div>
                                <!-- End Sidebar Widget Single Item - Social Widgets -->
                            </div>
                        </div>
                        <div class="col-lg-7 offset-lg-1">
                            <div class="contact-form-wrapper section-mt-165">
                                <!-- Start Section Content -->
                                <div class="content">
                                    <span class="section-tag">Get In Touch</span>
                                    <h2 class="title">If you have any porject or need help. Contact me</h2>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting emndustry lorem Ipsum
                                        has been the industry's standard dummy text ever since the 1500s, when an unknown print
                                        only five centuries, but also the leap into electronic.</p>
                                </div>
                                <!-- End Section Content -->

                                <!-- Start Contact Form Box -->
                                <div class="contact-form-box">
                                    <form id="contact-form" class="default-form contact-form" action="assets/mail/contact.php" method="post">
                                        <div class="row mb-n6">
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input name="name" type="text" placeholder="Name" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input name="email" type="email" placeholder="Email" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input name="phone" type="tel" placeholder="Phone" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 mb-6">
                                                <div class="default-form-group">
                                                    <input name="subject" type="text" placeholder="Subject" required>
                                                </div>
                                            </div>
                                            <div class="col-xl-12 mb-6">
                                                <div class="default-form-group">
                                                    <textarea name="message" placeholder="Comment" required></textarea>
                                                </div>
                                            </div>
                                            <div class="col-12 mb-6">
                                                <div class="default-form-group tex-center">
                                                    <button type="submit" class="btn btn-lg btn-outline-one">Submit Message</button>
                                                </div>
                                            </div>
                                            <p class="form-messege"></p>
                                        </div>
                                    </form>
                                </div>
                                <!-- End Contact Form Box -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ...::: End Contact Section :::... -->

        <span th:replace="~{common::footer}"></span>


        <!-- material-scrolltop button -->
        <button class="material-scrolltop" type="button"></button>
    </main>

    <!-- Global Vendor, plugins JS -->

    <!-- JS Files
    ============================================ -->
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>

    <!--Plugins JS-->
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.appear.min.js"></script>
    <script src="assets/js/plugins/jquery.nice-select.js"></script>
    <script src="assets/js/plugins/venobox.min.js"></script>
    <script src="assets/js/plugins/jquery.waypoints.js"></script>
    <script src="assets/js/plugins/images-loaded.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/counter.js"></script>
    <script src="assets/js/plugins/ajax-mail.js"></script>
    <script src="assets/js/plugins/material-scrolltop.js"></script>

    <!-- Minify Version -->
    <!-- <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> -->

    <!--Main JS (Common Activation Codes)-->
    <script src="assets/js/main.js"></script>

</body>

</html>
